<!DOCTYPE html>
<html lang="en">
<head>
  <title>滑动触发列表项菜单</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
  <!--标准mui.css-->
  <link rel="stylesheet" href="./mui.min.css">
  <!--App自定义的css-->
  <link rel="stylesheet" type="text/css" href="./app.css" />
</head>

<body>
  <div id="app">
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">滑动触发列表项菜单</h1>
    </header>
    <div class="mui-content">
        <h5 class="mui-content-padded" style="margin: 35px 10px 15px 10px;">拖拽(滑动)显示功能按钮，点击按钮触发事件</h5>
        <ul id="OA_task_1" class="mui-table-view">
            <li class="mui-table-view-cell" v-for='item,index in list'>
                <div class="mui-slider-right mui-disabled" @tap='closeTap(index)'>
                    <a class="mui-btn mui-btn-red">删除</a>
                </div>
                <div class="mui-slider-handle" @tap='btnTap(index)'>
                    <div>
                        <span>医生雷彪</span>
                        <h5>asa</h5>
                    </div>
                </div>
            </li>
        </ul>
    </div>
  </div>

  <script src="./vue.js"></script>
  <script src="./mui.min.js"></script>

  <script>
        var Main = {
        data () {
            return {
                list:[1,2,3,4,5,6,7,8,9]
            }
 
        },
        methods: {
            // 点击了li
            btnTap(index){
                alert(index)
            },
            //点击了删除
            closeTap(index){
                console.log(event);
                console.log(event.currentTarget);
                console.log(event.path[2]);
                //var tag = event.currentTarget
                var tag = event.path[2];
                // 按钮
                var btnArray = ['确认', '取消'];
                mui.confirm('确认删除该条记录？', '删除', btnArray, function(e) {
                    console.log(e);
                    if(e.index==0){
                        vm.list.splice(index,1)
                        console.log(vm.list); 
                        console.log(event.target);
                        console.log(tag);
                        console.log(mui.swipeoutClose);
                    }
                    mui.swipeoutClose(tag);
                });
            }
        },
        mounted(){
            console.log(mui);
            mui.plusReady(function(){  
                mui.init()
            })
        }
    }

    var vm = new Vue(Vue.extend(Main)).$mount('#app')
</script>
</body>

</html>